<!DOCTYPE html>
<!--
Copyright 2015 Pivotal Software, Inc..

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>注册</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script type="text/javascript" src="/static/javascript/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="/static/javascript/semantic.min.js"></script>
        <script type="text/javascript" th:src="@{/static/javascript/jquery.i18n.properties.min.js}" src="/static/javascript/jquery.i18n.properties.min.js"></script>
        <script type="text/javascript" th:src="@{/static/javascript/smarterlife.js}" src="/static/javascript/smarterlife.js"></script>
        <link type="text/css" href="/static/css/semantic.min.css" rel="stylesheet" />
        <link type="text/css" href="/static/css/smarterlife.css" rel="stylesheet" />
    </head>
    <body>
        <div id="register-container">
            <div id="register" class="ui form segment">
                <h2 class="ui header">
                    <i class="user icon"></i>
                    <em th:text="#{user.register}"></em>
                </h2>
                <form id="register-form" action="#" th:action="@{/user/register}" th:object="${userRegisterForm}" method="post" autocomplete="off">
                    <div th:class="${#fields.hasErrors('username')} ? 'field error' : 'field'">
                        <label>用户名</label>
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" placeholder="用户名/邮箱/手机号" th:field="*{username}" />
                            <div class="ui corner label">
                                <i class="icon asterisk red"></i>
                            </div>
                        </div>
                        <div class="ui red pointing above ui label" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>
                    </div>
                    <div th:class="${#fields.hasErrors('password')} ? 'field error' : 'field'">
                        <label>密码</label>
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="密码长度6-30位字符" />
                            <div class="ui corner label">
                                <i class="icon asterisk red"></i>
                            </div>
                        </div>
                        <div class="ui red pointing above ui label" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
                    </div>
                    <div th:class="${#fields.hasErrors('cpassword')} ? 'field error' : 'field'">
                        <label>确认密码</label>
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="cpassword" placeholder="请再一次输入密码" />
                            <div class="ui corner label">
                                <i class="icon asterisk red"></i>
                            </div>
                        </div>
                        <div class="ui red pointing above ui label" th:if="${#fields.hasErrors('cpassword')}" th:errors="*{cpassword}"></div>
                    </div>
                    <div class="ui teal submit button">注册</div>
                </form>
            </div>
        </div>
    </body>
</html>
